<template>
  <div>
    <h3 id="orderContentH3">服务费收益统计</h3>
    <div id="incomeEchart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import utils from "../../js/index";

export default {
  watch: {
    time(a, b) {
      if (this.dateType == "月") {
        var list = utils.utils.GetMonthNum(a);
        list.unshift(utils.utils.NewDateMonth(a));
        this.timeNum = list;
      }
    },
    selectData1(a, b) {
      // console.log(this.timeNum);
      // if (this.MonthType == "月") {
      //   var arr = [];
      //   for (var i = 0; i < this.timeNum.length; i++) {
      //     for (var x = 0; x < a.length; x++) {
      //       if (a[x] && a[x].TIME == this.timeNum[i]) {
      //         arr.push(a[x]);
      //       } else if (arr.length > 10) {
      //         arr.push({ oldprice: 0, TIME: a[x].TIME });
      //       }
      //     }
      //   }
      //   // this.timeNum.forEach((e, i) => {
      //   //   if (utils.utils.NewDateMonth(a[i].TIME) == e) {
      //   //     console.log(e)
      //   //     arr.push(a[i]);
      //   //   } else {
      //   //     arr.push({ oldprice: 0, TIME: e });
      //   //   }
      //   // });
      //   this.echartData1 = arr;
      // } else {
      this.echartData1 = a;
      this.carried();
    },
    selectData2(a, b) {
      // this.getDateList();
      // if (this.MonthType == "月") {
      //   var arr = [];
      //   for (var i = 0; i < this.timeNum.length; i++) {
      //     for (var x = 0; x < a.length; x++) {
      //       if (a[x].TIME == this.timeNum[i]) {
      //         arr.push(a[x]);
      //       } else if (arr.length > 10) {
      //         arr.push({ oldprice: 0, TIME: this.timeNum[i] });
      //       }
      //     }
      //   }
      //   this.echartData2 = arr;
      this.echartData2 = a;
      this.carried();
    },
    dateType(a, b) {
      this.dateType = a;
      this.MonthType = a;
    },
    deep: true,
  },
  props: ["selectData1", "selectData2", "dateType", "time"],
  data() {
    return {
      timeNum: [],
      MonthType: "",
      echartData1: [],
      echartData2: [],
    };
  },
  mounted() {},
  methods: {
    getDateList() {
      var arr = [];
      console.log(this.echartData1);
      this.echartData1.forEach((e, i) => {
        if (this.echartData2[i] && e.TIME == this.echartData2[i].TIME) {
          console.log(this.echartData2[i]);
          arr.push(this.echartData2[i]);
        } else {
          arr.push({ oldprice: 0, TIME: e.TIME });
          if (arr.length > 10) {
            arr.push({ oldprice: 0, TIME: e.TIME });
          }
        }
      });
      console.log(arr);
    },
    carried() {
      var echart2 = echarts.init(document.querySelector("#incomeEchart"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.option2(), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    option2() {
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["用户", "第三方"],
        },
        xAxis: [
          {
            type: "category",
            data: this.echartData1.map((e) => {
              return e.TIME;
            }),
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "第三方",
            min: 0,
            max: function (value) {
              return value.max + 300;
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "用户",
            type: "bar",
            barWidth: 30,
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#2980B9", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#6DD5FA", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#6DD5FA", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: this.echartData1.map((e) => {
              return this.dateType == "天" ? e.Num : e.oldprice;
            }),
          },
          {
            name: "第三方",
            type: "bar",
            barWidth: 30,
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#6A5ACD", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#6A5ACD", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1E90FF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: this.echartData2.map((e) => {
              return this.dateType == "天" ? e.Num : e.oldprice;
            }),
          },
        ],
      };
      return option;
    },
  },
};
</script>
<style scoped>
#incomeEchart {
  width: 95%;
  height: 350px;
}
#orderContentH3 {
  width: 95%;
  margin: 0 auto;
  padding-top: 20px;
}
</style>